<template>
  <div class="flex w-full">
    <!-- int32 -->
    <a-form
      v-if="valueDataType === 'int' || valueDataType === 'float'"
      ref="int32Ins"
      name="int32_form"
      :model="int32Form"
      layout="vertical"
    >
      <a-form-item label="取值范围" name="min" :rules="ruleMin">
        <div class="flex flex-row items-center w-full">
          <a-input
            v-model:value="int32Form.min"
            autocomplete="off"
            class="flex-1"
            placeholder="最小值"
            type="number"
          ></a-input>
          <span class="w-12 text-center text-base text-color-main">-</span>
          <a-form-item-rest>
            <a-input
              v-model:value="int32Form.max"
              autocomplete="off"
              class="flex-1"
              placeholder="最大值"
              type="number"
            ></a-input>
          </a-form-item-rest>
        </div>
      </a-form-item>
      <a-form-item
        name="unit"
        label="单位"
        :rules="[
          {
            max: 32,
            message: '最多可输入32个字符',
          },
        ]"
      >
        <a-input v-model:value="int32Form.unit" autocomplete="off" class="w-full" placeholder="请输入" />
      </a-form-item>
      <a-form-item
        name="stepSize"
        :rules="{
          max: 250,
          message: '最多可输入250个字符',
        }"
      >
        <template #label>
          <span>步长</span>
          <span class="text-color-secondary ml-2.5">属性值变化的最小粒度</span>
        </template>
        <a-input v-model:value="int32Form.stepSize" autocomplete="off" class="w-full" placeholder="请输入"></a-input>
      </a-form-item>
      <a-form-item
        label="值状态说明"
        name="attributeDesc"
        :rules="{
          max: 250,
          message: '最多可输入250个字符',
        }"
      >
        <a-input
          v-model:value="int32Form.attributeDesc"
          autocomplete="off"
          class="w-full"
          placeholder="请输入"
        ></a-input>
      </a-form-item>
    </a-form>
    <!-- int32 -->
    <!-- boolean -->
    <a-form
      v-else-if="valueDataType === 'boolean'"
      ref="booleanIns"
      name="boolean_form"
      :model="booleanForm"
      layout="vertical"
    >
      <a-form-item label="布尔值" :required="true">
        <div class="flex flex-row items-center w-99">
          <span class="w-12 text-base text-color-main">0 -</span>
          <a-input
            v-model:value="booleanForm.value1"
            :maxlength="32"
            autocomplete="off"
            class="flex-1"
            placeholder="请输入"
          ></a-input>
          <span class="w-12 text-center text-base text-color-main">1 -</span>
          <a-input
            v-model:value="booleanForm.value2"
            :maxlength="32"
            autocomplete="off"
            class="flex-1"
            placeholder="请输入"
          ></a-input>
        </div>
      </a-form-item>
      <a-form-item
        label="值状态说明"
        name="attributeDesc"
        :rules="{
          max: 250,
          message: '超过输入限制',
        }"
      >
        <a-input
          v-model:value="booleanForm.attributeDesc"
          autocomplete="off"
          class="w-99"
          placeholder="请输入"
        ></a-input>
      </a-form-item>
    </a-form>
    <!-- boolean -->
    <!-- valueDataType === 'string' -->
    <a-form v-else ref="stringIns" name="string_form" :model="stringForm" layout="vertical">
      <a-form-item
        name="attributeDesc"
        label="值状态说明"
        :rules="[
          {
            max: 250,
            message: '最多可输入250个字符',
          },
        ]"
      >
        <a-input v-model:value="stringForm.attributeDesc" autocomplete="off" class="w-full" placeholder="请输入" />
      </a-form-item>
    </a-form>
    <!-- valueDataType === 'string' -->
  </div>
</template>
<script lang="ts" setup>
import { emit } from "process";
import { ref, computed, watch, nextTick, watchEffect } from "vue";
import { ParEquipmentAttrItem } from "/@/api/aiot/equipmentType/models";
const props = defineProps<{
  valueDataType?: string;
  equipmentAttrModel?: ParEquipmentAttrItem;
}>();
const emits = defineEmits(["update:equipmentAttrModel"]);
const int32Ins = ref();
const booleanIns = ref();
const stringIns = ref();
const int32Form = ref<ParEquipmentAttrItem>({
  min: 0,
  max: 0,
  unit: "",
  stepSize: "",
  attributeDesc: "",
});
const stringForm = ref<ParEquipmentAttrItem>({
  attributeDesc: "",
});
const booleanForm = ref<ParEquipmentAttrItem>({
  value1: "",
  value2: "",
  attributeDesc: "",
  extend: {},
});
watch(
  () => props.equipmentAttrModel,
  () => {
    if (props.equipmentAttrModel) {
      if (props.valueDataType === "int" || props.valueDataType === "float") {
        for (let key in int32Form.value) {
          int32Form.value[key] = props.equipmentAttrModel[key] || "";
        }
        let rangeArr = props.equipmentAttrModel.valueRange?.split("-");
        if (rangeArr && rangeArr.length > 0) {
          int32Form.value.min = rangeArr[0];
          int32Form.value.max = rangeArr[1];
        }
      } else if (props.valueDataType === "boolean") {
        booleanForm.value.attributeDesc = props.equipmentAttrModel.attributeDesc;
        if (props.equipmentAttrModel.extend) {
          let extend = JSON.parse(props.equipmentAttrModel.extend);
          booleanForm.value.value1 = extend.falseDesc;
          booleanForm.value.value2 = extend.trueDesc;
        }
      } else {
        stringForm.value.attributeDesc = props.equipmentAttrModel.attributeDesc;
      }
    }
  },
  { deep: true, immediate: true }
);
watch(
  () => props.valueDataType,
  (v) => {
    if (v) {
      nextTick(() => {
        rest();
        // emits("update:equipmentAttrModel", {});
      });
    }
  },
  {
    deep: true,
  }
);
const ruleMin: any = [
  {
    // validator: async (_rule: any, value: number | string) => {
    //   if (value === "") {
    //     return Promise.reject("请输入最小值");
    //   } else if ((value as any) - (int32Form.value.max as any) > 0) {
    //     return Promise.reject("请输入正确的最小值");
    //   } else {
    //     return Promise.resolve();
    //   }
    // },
    // trigger: "change",
  },
];
function rest() {
  int32Ins.value?.resetFields();
  booleanIns.value?.resetFields();
  stringIns.value?.resetFields();
  int32Form.value = {
    min: 0,
    max: 0,
    unit: "",
    stepSize: "",
    attributeDesc: "",
  };
  booleanForm.value = {};
  stringForm.value = {};
}
const formData = computed(() => {
  let obj: ParEquipmentAttrItem = {};
  if (props.valueDataType === "int" || props.valueDataType === "float") {
    obj = Object.assign(obj, int32Form.value || {});
    if (obj && obj.min !== undefined && obj.min !== null && obj.max !== undefined && obj.max !== undefined) {
      obj.valueRange = obj.min + "-" + obj.max;
    } else {
      obj.valueRange = "";
    }
  } else if (props.valueDataType === "boolean") {
    obj = Object.assign(obj, booleanForm.value || {});
    // 0对应falseDesc 1对应trueDesc
    obj.extend = {
      falseDesc: obj.value1,
      trueDesc: obj.value2,
    };
    obj.extend = JSON.stringify(obj.extend);
  } else {
    obj = Object.assign(obj, stringForm.value || {});
  }
  if (!obj.attributeDesc) {
    obj.attributeDesc = "";
  }
  return obj;
});
defineExpose({
  booleanForm,
  int32Form,
  stringForm,
  rest,
  formData,
});
</script>
<style lang="less" scoped>
.ant-form {
  width: 100%;
}
</style>
